<ui:composition xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:c="http://java.sun.com/jstl/core"
                xmlns:util="http://code.google.com/p/ada-asf/util"
                xmlns:ajax="http://code.google.com/p/ada-asf/ajax"
                template="/WEB-INF/layouts/layout.xhtml">
    <ui:param name="title" value="Ada Server Faces Examples" />
    <ui:param name="pageStyle" value="sample-forms"/>
    <!-- Main page body -->
    <ui:define name="pageBody">

        <util:script>
            function sample_select(node, name) {
                $(".selector li").removeClass("ui-tabs-selected ui-state-active");
                ASF.Update(node, '#{contextPath}/forms/' + name + '.html', '#form-block');
                ASF.Update(node, '#{contextPath}/forms/code.html?code=' + name, '#form-code',
                           function(n) {
                                prettyPrint();
                });
                $(node).parent().addClass("ui-tabs-selected ui-state-active");
                return false;
            }
            prettyPrint();
        </util:script>
        <div class="grid_12 left ui-tabs ui-widget ui-widget-content ui-corner-all">
            <ul class='selector ui-tabs-nav ui-widget-header ui-corner-all'>
                <li class='ui-state-default ui-corner-top ui-tabs-selected ui-state-active'>
                    <a href="#" onclick="return sample_select(this, 'text-form');">
                        h:inputText
                    </a>
                </li>
                <li class="ui-state-default ui-corner-top ">
                    <a href="#" onclick="return sample_select(this, 'select-form');">
                        h:selectOneMenu
                    </a>
                </li>
                <li class="ui-state-default ui-corner-top ">
                     <a href="#" onclick="return sample_select(this, 'secret-form');">
                         h:inputSecret
                     </a>
                 </li>
                <li class="ui-state-default ui-corner-top ">
                    <a href="#" onclick="return sample_select(this, 'textarea-form');">
                        h:inputTextarea
                    </a>
                </li>
            </ul>
            <div class="grid_12 left ui-tabs-panel ui-widget-content ui-corner-bottom clearfix">
                <div class="grid_4 ui-widget">
                    <div id='form-block' class="asf-container ui-widget ui-widget-content ui-corner-all">
                        <ajax:include src="/forms/text-form.xhtml"/>
                    </div>
                    <div id="result"/>
                </div>
                <div id='form-code' class="grid_8 code ui-widget asf-container ui-corner-all">
                    <ajax:include src="/forms/code.xhtml" async="true"/>
                </div>
            </div>
        </div>

    </ui:define>
    <ui:define name="pageScript">
        <script type="text/javascript" src="#{contextPath}/js/samples.js"></script>
    </ui:define>
</ui:composition>